<template>
    <div class="login">
        <div class="loginTop">
            <div class="logo" @click="goback">
                <img src="../assets/images/ziti.webp" />
            </div>
        </div>
        <div class="login-box">
            <div class="welcome">欢迎回来!</div>
            <div class="en">Welcome back</div>
            <!-- 登录 -->
            <div class="form-box">
                <van-form @submit="Login">
                    <van-field
                        v-model="userInfoLogin.phone"
                        name="phone"
                        label="手机号"
                        placeholder="手机号"
                        :rules="[
                            { required: true, message: '请填写手机号' },
                            { pattern: phoneReg, message: '手机号格式不正确' },
                        ]"
                        autocomplete="off"
                    />
                    <!-- <van-field v-model="userInfoLogin.password" :type="LoginisView?'text':'password'" name="password" label="密码" placeholder="密码" :rules="[{ required: true, message:'请填写密码'},{ pattern: passwordReg, message:'首字符为字母,可由字母数字下划线组合'}]" :right-icon="LoginisView?'eye-o':'closed-eye'"  @click-right-icon = "clickLogineye"/> -->
                    <van-field
                        v-model="userInfoLogin.password"
                        :type="LoginisView ? 'text' : 'password'"
                        name="password"
                        label="密码"
                        placeholder="密码"
                        autocomplete="off"
                        :rules="[
                            { required: true, message: '请填写密码' },
                            { pattern: passwordReg, message: '首字符为字母,可由字母数字下划线组合' },
                        ]"
                        :right-icon="LoginisView ? 'eye-o' : 'closed-eye'"
                        @click-right-icon="clickLogineye"
                    />
                    <div class="forgot">
                        <div class="forgot-text">忘记密码</div>
                    </div>
                    <div class="form-btn">
                        <van-button round block type="info" native-type="submit" class="login-btn" @click="userLogin">登录</van-button>
                        <van-button round block type="default" native-type="button" @click="show">注册</van-button>
                    </div>
                </van-form>
            </div>
        </div>
        <!-- 注册 -->
        <van-popup v-model="isShow" position="bottom" closeable>
            <div class="register">
                <div class="title">注册</div>
                <div class="f-box">
                    <van-form @submit="register">
                        <van-field
                            v-model="userInfoRegister.phone"
                            name="phone"
                            label="手机号"
                            placeholder="手机号"
                            :rules="[
                                { required: true, message: '请填写手机号' },
                                { pattern: phoneReg, message: '手机号格式不正确' },
                            ]"
                            autocomplete="off"
                        />
                        <van-field
                            v-model="userInfoRegister.password"
                            :type="RegisterisView ? 'text' : 'password'"
                            name="password"
                            label="密码"
                            placeholder="密码(6-16位)"
                            :rules="[
                                { required: true, message: '请填写密码' },
                                { pattern: passwordReg, message: '首字符为字母,可由字母数字下划线组合' },
                            ]"
                            autocomplete="off"
                            @click-right-icon="clickRegistereye"
                            :right-icon="RegisterisView ? 'eye-o' : 'closed-eye'"
                        />
                        <van-field
                            v-model="userInfoRegister.name"
                            type="text"
                            name="name"
                            label="昵称"
                            placeholder="中英文1-16位"
                            :rules="[
                                { required: true, message: '请填写昵称' },
                                { pattern: nameReg, message: '昵称由中英文组合' },
                            ]"
                            autocomplete="off"
                        />
                        <div class="form-btn">
                            <van-button round block type="info" native-type="submit" @click="userregister">注册</van-button>
                        </div>
                    </van-form>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
// import { CLIENT_RENEG_LIMIT } from 'tls';

// import { json } from 'body-parser';
import { Toast } from "vant";

export default {
    name: "Login",
    data() {
        return {
            // 用户登录的信息
            userLoignInfo: {},
            // 用户注册的信息
            userRegisterInfo: {},
            // 是否显示注册弹窗
            isShow: false,

            // 手机号正则表达式
            phoneReg: /^1[3-9]\d{9}$/,

            // 密码正则表达式(首字符为字母,可由字母数字下划线组合[6-16位])
            passwordReg: /^[A-Za-z]\w{5,15}$/,

            // 昵称正则表达式(中英混合[1-16])
            nameReg: /^[A-Za-z\u4e00-\u9fa5]{1,16}$/,

            // 注册查看密码
            RegisterisView: false,

            // 登录查看密码
            LoginisView: false,
            // 登录数据
            userInfoLogin: {
                phone: "",
                password: "",
            },
            // 注册数据
            userInfoRegister: {
                name: "",
                phone: "",
                password: "",
            },
            a: 1,
        };
    },

    methods: {
        // 显示注册弹窗
        show() {
            this.isShow = true;
        },
        // 得到用户注册后的信息
        register(registerInfo) {
            this.userRegisterInfo = registerInfo;
        },
        // 得到用户登录的信息
        Login(loginInfo) {
            this.userLoignInfo = loginInfo;
        },
        // 注册查看密码
        clickRegistereye() {
            this.RegisterisView = !this.RegisterisView;
        },
        // 登录查看密码
        clickLogineye() {
            this.LoginisView = !this.LoginisView;
        },
        // 点击登录按钮事件
        userLogin() {
            this.userLoignInfo = this.userInfoLogin;
            // console.log(this.userLoignInfo);
            // console.log(this.userLoignInfo.phone);
            // console.log(JSON.parse(localStorage.getItem("userInfo")).phone);
            // 如果已经注册了
            if (JSON.parse(localStorage.getItem("userInfo"))) {
                // 手机号与密码都正确时,登录成功
                if (this.userLoignInfo.phone == JSON.parse(localStorage.getItem("userInfo")).phone && this.userLoignInfo.password == JSON.parse(localStorage.getItem("userInfo")).password) {
                    Toast("登录成功");
                    this.$router.push({ name: "Shouye" });
                    // 将登录成功标识符存到本地存储
                    localStorage.setItem("isLogin", true);
                    // 密码错误
                } else if (this.userLoignInfo.password != JSON.parse(localStorage.getItem("userInfo")).password) {
                    Toast("密码错误");
                    // 手机号错误
                } else {
                    Toast("该用户未注册");
                }
                // 没有注册数据
            } else {
                Toast("用户未注册");
            }
        },

        // 点击注册按钮事件
        userregister() {
            // 将用户的注册信息保存到本地存储
            this.userRegisterInfo = this.userInfoRegister;
            // console.log(this.userRegisterInfo);
            console.log(this.userInfoRegister.phone);
            // console.log(JSON.parse(localStorage.getItem("userInfo")).phone);
            // 如果已经注册了
            if (JSON.parse(localStorage.getItem("userInfo"))) {
                if (this.userInfoRegister.phone == JSON.parse(localStorage.getItem("userInfo")).phone) {
                    Toast("该手机号已注册过");
                } else {
                    localStorage.setItem("userInfo", JSON.stringify(this.userRegisterInfo));
                    // if(localStorage.userInfo)
                    Toast("注册成功");
                    this.isShow = false;
                }
            } else {
                localStorage.setItem("userInfo", JSON.stringify(this.userRegisterInfo));
                // if(localStorage.userInfo)
                Toast("注册成功");
                this.isShow = false;
            }
        },
        goback() {
            this.$router.back();
        },
    },
    created() {
        if (localStorage.userInfo) {
            this.userRegisterInfo = JSON.parse(localStorage.getItem("userInfo"));
        }
    },
};
</script>

<style lang="less" scoped>
.login {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .register {
        padding: 15px;
        .title {
            font-size: 18px;
        }
        .f-box {
            margin-top: 20px;
            margin-bottom: 20px;
            .form-btn {
                margin-top: 20px;
            }
        }
    }
    .loginTop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        .logo {
            width: 40px;
            height: 50px;
            margin-left: 20px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .login-box {
        margin: 150px 0 0 20px;
        .forgot {
            display: flex;
            .forgot-text {
                margin-left: 300px;
                margin-top: 20px;
                color: #666;
            }
        }
        .welcome {
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .en {
            font-size: 20px;
            color: #a7afc4;
        }
        .form-box {
            margin-top: 20px;
            .form-btn {
                margin: 70px 10px 0 -10px;
                .login-btn {
                    margin-bottom: 20px;
                }
            }
        }
    }
}
</style>
